<!-- 卡片 - 手记 - 随笔 -->
<template>
  <div class="card-box">
    <ContentTitle title="卡片："></ContentTitle>
    <div class="card-all">

      <!-- 卡片设置 -->
      <div>
        <div>文字：</div>
        <a-textarea class="card-input" v-model="contentTxt" placeholder="请输入正文" :auto-size="{ minRows: 3, maxRows: 5 }"/>
        <div>引用：</div>
        <a-textarea class="card-input" v-model="quoteTxt" placeholder="请输入引用" auto-size />
        <div class="change-img">
          <div>换图：</div>
          <a-button type="link" icon="redo" @click="refreshImg()" />
          <img :src="`/static/images/${item}.jpg`" class="all-img" v-for="(item, index) in imgList" :key="index" @click="refreshImg(item)" />
        </div>
        <div style="margin-top: 10px;">效果: <a-button type="primary" @click="downLoadImg">下载</a-button></div>
      </div>
      
      <!-- 卡片内容 -->
      <div class="card-content" id="card" ref="mycard">
        <div class="bg" :style="bgImg">
          <div class="bg-mask"></div>
        </div>
        <div class="day" :data-key="day">{{day}}</div>
        <div class="y-m-w">
          <span>{{year}}.{{month}} </span>
          <span>{{weekDay}}</span>
        </div>
        <div class="card-txt">
          <div class="content-txt" v-html="contentTxt"></div>
          <div class="quote-txt">{{quoteTxt}}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  mounted() { },
  computed: {
    weekDay() {
      let ret = null;
      const w = this.$moment().format('d');
      switch (w) {
        case '0':
          ret = '星期日';
          break;
        case '1':
          ret = '星期一';
          break;
        case '2':
          ret = '星期二';
          break;
        case '3':
          ret = '星期三';
          break;
        case '4':
          ret = '星期四';
          break;
        case '5':
          ret = '星期五';
          break;
        case '6':
          ret = '星期六';
          break;
        default:
          break;
      }
      return ret;
    },
  },
  data() {
    return {
      downId: 'card',
      year: this.$moment().format('YYYY'),
      month: this.$moment().format('MM'),
      day: this.$moment().format('DD'),
      contentTxt: '毁掉我们的不是我们所憎恨的东西，而恰恰是我们所热爱的东西。',
      quoteTxt: '尼尔·波兹曼',
      bgImg: null,
      imgList: 9,
    };
  },
  methods: {
    // 刷新图片
    refreshImg(val) {
      if (val) {
        this.bgImg = `background-image: url("/static/images/${val}.jpg")`;
      } else {
        const num = Math.floor(Math.random() * 9) + 1;
        this.bgImg = `background-image: url("/static/images/${num}.jpg")`;
      }
      console.log(this.bgImg);
    },
    // 转换图片
    fixType(type) {
      const types = type.toLowerCase().replace(/jpg/i, 'jpeg');
      const r = types.match(/png|jpeg|bmp|gif/)[0];
      return `image/${r}`;
    },
    // 下载图片
    saveFile(data, filename) {
      const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      saveLink.href = data;
      saveLink.download = filename;

      const event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      saveLink.dispatchEvent(event);
    },
    // 下载推广图片
    downLoadImg() {
      const that = this;
      const cWidth = this.$refs.mycard.offsetWidth || 375;
      const cHeight = this.$refs.mycard.offsetHeight || 683;
      const opts = {
        logging: false,
        width: cWidth,
        height: cHeight,
        scale: 2,
      };
      setTimeout(() => {
        that.html2canvas(document.getElementById(that.downId), opts).then((canvas) => {
          const type = 'png'; // 图片导出为 png 格式
          const imgUri = canvas.toDataURL('image/png').replace(that.fixType(type), 'image/octet-stream');
          const filename = `卡片_${this.$moment().format()}.${type}`;
          that.saveFile(imgUri, filename);
        }, {
            useCORS: true,
          });
      }, 0);
    },
  },
};
</script>

<style lang='less' scoped>
.card-box {
  .card-all {
    display: flex;
  }
  .card-content {
    width: 375px;
    margin: auto;
    background-color: #fafafa;
  }
  .bg {
    position: relative;
    width: 375px;
    height: 253px;
    background-image: url("/static/images/2.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  .day {
    position: relative;
    display: inline-block;
    font-size: 90px;
    line-height: 90px;
    overflow: hidden;
    white-space: pre;
    margin-top: -57px;
    margin-left: 30px;
  }
  .day:before {
    position: absolute;
    left: 0;
    top: 0;
    color: white;
    display: block;
    height: 62%;
    content: attr(data-key);
    overflow: hidden;
  }

  .y-m-w {
    text-align: right;
    margin-top: -30px;
    padding-right: 15px;
  }

  .card-input {
    width: 400px;
    margin-bottom: 30px;
  }

  .card-txt {
    min-height: 400px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .content-txt {
    font-size: 16px;
    text-indent: 24px;
  }

  .quote-txt {
    text-align: right;
    margin-top: 30px;
  }

  .change-img {
    display: flex;
    width: 450px;
    flex-wrap: wrap;
  }

  .all-img {
    width: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
}
</style>
